<template>
  <div class="container userDetail">
    <div class="container-top">
      <div class="top-name">查看</div>
    </div>
    <div class="main">
      <el-form
        :model="detail"
        ref="detail"
        label-width="150px"
      >
        <div class="sub_title">账户信息</div>
        <el-form-item
          label="注册时间："
          prop="name"
        >
          <span>{{detail.gmtCreated}}</span>
        </el-form-item>
        <el-form-item
          label="用户ID："
          prop="type"
        >
          <span>{{detail.id}}</span>
        </el-form-item>
        <el-form-item
          label="昵称："
          prop="userName"
        >
          <span>{{detail.userName}}</span>
        </el-form-item>
        <el-form-item
          label="手机号："
          prop="mobile"
        >
          {{detail.mobile}}
        </el-form-item>
        <el-form-item
          label="头像："
          prop="image"
        >
          <img
            v-if="detail.avatarUrl"
            style="width:80px;height:80px;border-radius:50%"
            :src="detail.avatarUrl"
          >
          <div v-else>暂无</div>
        </el-form-item>
        <el-form-item
          label="性别："
          prop="detail"
        >
          <span>{{detail.sex == 1?'男':'女'}}</span>
        </el-form-item>
        <el-form-item
          label="出生日期："
          prop="birthday"
        >
          <span>{{detail.birthday}}</span>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="$router.back()"
          >返回</el-button>
        </el-form-item>
      </el-form>
      <el-dialog
        title="备注"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="remark"
        >
        </el-input>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >取 消</el-button>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitRemark"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");
export default {
  name: "service-detail",

  data() {
    return {
      id: null,
      detail: {
        gmtCreated: "暂无",
        lastTransactionDate: "暂无",
        nickName: "暂无",
        id: "暂无",
        mobile: "暂无",
        avatarUrl: "暂无",
        sex: "暂无",
        birthday: "暂无",
        parentUser: {
          id: "",
          nickName: "暂无"
        },
        remarks: "暂无"
      },
      dialogVisible: false,
      loading: false,
      remark: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取详情
    getDetail() {
      let url = CONSTANT.URL.LIST.USERDETAIL;
      common.get(url, this.id, res => {
        if (res.code == 200) {
          this.detail = Object.assign(this.detail, res.data.bussData);
        }
      });
    },
    submitRemark() {
      this.loading = true;
      let url = CONSTANT.URL.LIST.USERREMARK;
      let data = {
        id: this.id,
        remark: this.remark
      };
      common.post(url, data, res => {
        this.loading = false;
        this.dialogVisible = false;
        this.detail.remarks = this.remark;
      });
    }
  }
};
</script>
<style lang="scss">
.banner_img {
  display: inline-block;
  margin-right: 20px;
  width: 176px;
  height: 176px;
  margin-bottom: 20px;
  cursor: pointer;
  img {
    width: 176px;
    height: 176px;
    position: absolute;
    z-index: 1;
    margin-left: -14px;
  }
}
.form_item_label {
  margin: 0 10px;
}

.userDetail {
  .el-form-item__label {
      text-align: left;
      color: #A5A5A5;
      margin-left: 60px;
  }
  .el-form-item{
    margin-bottom: 5px!important;
  }
  .el-form-item__label {
    text-align: left;
    margin-left: 60px;
  }
}

.table-content {
  width: 250px;
  .table-item {
    border: 1px solid #dcdfe6;
    &:first-child {
      background-color: #409eff;
      color: #fff;
      border-right: 0px solid #dcdfe6;
      .table-list {
        padding: 0;
      }
    }

    .table-list {
      flex: 2;
      text-align: center;
      padding: 5px 0;
      .el-input {
        height: 70% !important;
      }
      &:first-child {
        flex: 3;
        border-right: 1px solid #dcdfe6;
      }
    }
  }
}
</style>
